<template>
    <el-form label-position="right" label-width="100px">
        <template v-if="schema">
            <el-form-item
                v-for="(field, key) in schema"
                :key="key"
                :label="field.label"
            >
                <!-- 字符串类型 -->
                <el-input
                    v-if="field.type === 'string'"
                    v-model="formData[key]"
                    :placeholder="'请输入' + field.label"
                />

                <!-- 数字类型 -->
                <el-input-number
                    v-else-if="field.type === 'number'"
                    v-model="formData[key]"
                    :placeholder="'请输入' + field.label"
                />

                <!-- 布尔类型 -->
                <el-switch
                    v-else-if="field.type === 'boolean'"
                    v-model="formData[key]"
                />

                <!-- 选择器类型 -->
                <el-select
                    v-else-if="field.type === 'select'"
                    v-model="formData[key]"
                    :placeholder="'请选择' + field.label"
                >
                    <el-option
                        v-for="option in field.options"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                    />
                </el-select>
            </el-form-item>
        </template>
        <div v-else class="empty-tip">
            暂无可配置属性
        </div>
    </el-form>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface FieldSchema {
    type: 'string' | 'number' | 'boolean' | 'select'
    label: string
    options?: Array<{ label: string; value: any }>
}

interface Props {
    modelValue: Record<string, any>
    schema?: Record<string, FieldSchema>
}

const props = defineProps<Props>()
const emit = defineEmits<{
    'update:modelValue': [value: Record<string, any>]
}>()

// 表单数据
const formData = computed({
    get: () => props.modelValue,
    set: (value) => {
        emit('update:modelValue', value)
    }
})
</script>

<style scoped>
.empty-tip {
    color: #909399;
    text-align: center;
    padding: 20px;
}

:deep(.el-form-item) {
    margin-bottom: 18px;
}

:deep(.el-input),
:deep(.el-select) {
    width: 100%;
}
</style> 